<template>
  <DFModal
    :title="`${t('common.button.preview')}${props.tempName}`"
    :width="600"
    class="basicModal"
    :confirm-btn-show="false"
    @register="modalRegister"
  >
    <template #default>
      <PrintingTemplate :print-html="printHtml" />
    </template>
  </DFModal>
</template>

<script lang="ts" setup name="TemplateModal">
  import { ref, watch } from 'vue';
  import lang from '../lang';
  import PrintingTemplate from './PrintingTemplate.vue';
  import { DFModal, useModal } from '@/components/DFModal';
  import { useMixins } from '@/hooks/useMixins';
  import { t } from '@/i18n';

  const props = withDefaults(defineProps<Props>(), {
    tempInfo: () => {},
    tempName: () => '',
  });
  const { loadLangFn, language } = useMixins();
  loadLangFn(lang);

  interface Props {
    tempInfo: any;
    tempName?: string;
  }
  const printHtml = ref(null);

  const [modalRegister, { openModal }] = useModal({});

  watch(
    () => props.tempInfo,
    (val: any) => {
      if (val) {
        const {
          tempTitleZh = null,
          tempTitleEn = null,
          descriptiveInformationList = null,
          tableInformationList = null,
        } = val;

        const title = language.value === 'zh' ? tempTitleZh : tempTitleEn;
        const headTable: any = [];
        const table: any = [];

        if (descriptiveInformationList && descriptiveInformationList.length) {
          for (const item of descriptiveInformationList) {
            const {
              columnName = null,
              columnDetailZh = null,
              columnDetailEn = null,
              customNameZh = null,
              customNameEn = null,
              customValue = null,
            } = item;

            headTable.push({
              name:
                language.value === 'zh'
                  ? customNameZh || columnDetailZh
                  : customNameEn || columnDetailEn,
              prop: customValue ? null : columnName,
              value: customValue || '-',
            });
          }
        }

        if (tableInformationList && tableInformationList.length) {
          for (const item of tableInformationList) {
            const {
              columnName1 = null,
              columnDetailZh1 = null,
              columnDetailEn1 = null,
              customNameZh1 = null,
              customNameEn1 = null,
              customValue1 = null,
              columnName2 = null,
              columnDetailZh2 = null,
              columnDetailEn2 = null,
              customNameZh2 = null,
              customNameEn2 = null,
              customValue2 = null,
            } = item;

            table.push({
              name:
                language.value === 'zh'
                  ? customNameZh1 || columnDetailZh1
                  : customNameEn1 || columnDetailEn1,
              prop: customValue1 ? null : columnName1,
              value: customValue1 || '-',
              name2:
                language.value === 'zh'
                  ? customNameZh2 || columnDetailZh2
                  : customNameEn2 || columnDetailEn2,
              prop2: customValue2 ? null : columnName2,
              value2: customValue2 || '-',
            });
          }
        }
        printHtml.value = {
          title,
          headTable,
          table,
        };
      }
    },
    {
      deep: true,
      immediate: true,
    }
  );

  defineExpose({ openModal });
</script>
